<script setup>

import { ref } from 'vue'
import {loginAPI } from '@/api/login'

  // 登录表单数据
const loginForm = ref({
  stuId: '',
  password: ''
  })

  // 登录方法
const login = async () => {
    
  // 发送请求登录
  const res = await loginAPI(loginForm.value)
  console.log(res);

  // 判断是否登录成功
    if (res.code === 0) {

       // 提示用户
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })

      // 本地存储tokoen
      uni.setStorageSync("token", res.data.cookie)  

      // 跳转到首页
     setTimeout(() => {
      uni.switchTab({
        url: '/pages/index/index',
      })
     }, 500)
    }
      
}

</script>

<template>
  <view class="container">
    <view class="img">
      <image src="../../static/images/login.png" mode=""></image>
    </view>
    <view class="login">
      <view class="form-item">
        <image class="icon" src="../../static/images/username.png" mode=""></image>
        <input type="text" v-model="loginForm.stuId" placeholder="请输入学号" />
      </view>
     <view class="form-item">
      <image class="icon" src="../../static/images/password.png" mode=""></image>
        <input type="prossword" v-model="loginForm.password" placeholder="请输入密码" />
     </view>
      <view class="checkbox">
        <label>
          <checkbox :value="1" /><text>记住账号密码(仅本地存储)</text>
        </label>
      </view>
      <button @click="login">登录</button>
    </view>
  </view>
</template>



<style scoped lang="scss">
.container {
  height: 100vh;
  background-color: #fafafa;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  .img {
    margin: 0 auto;
    padding-top: 50px;
    text-align: center;
    image {
        width: 152px;
        height: 80px;
     }
  
  }
  .login {
    width: 100%;
    // margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
    // text-align: center;''
    .form-item {
      position: relative;
    }
    .icon {
      width: 32rpx;
      height: 32rpx;
      position: absolute;
      top: 35rpx;
      left: 40rpx;
    }
    input {
      width: 307px;
      height: 49px;
      border-radius: 24.5px;
      opacity: 1;
      background: #FFFFFF;
      padding-left: 90rpx;
      
      border: 1px dashed rgba(232, 232, 232, 0.86);
      
      box-shadow: 0px 0px 2px -4px rgba(0, 0, 0, 0.1);
      margin-bottom: 24px;
    }
    .checkbox {
      margin-right: 90px;
      margin-bottom: 20px;
      font-family: 思源黑体;
      font-size: 16px;
      font-weight: normal;
      line-height: 23px;
      letter-spacing: 0px;
      
      color: #666666;
    }
    button {
      width: 307px;
      height: 48px;
      border-radius: 24px;
      background: linear-gradient(90deg, rgba(193, 239, 245, 0.9) 0%, #0AE8F0 0%, #88F2DF 100%);
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    color: #fff;
    }
  }
}
</style>
